<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  <body>

  </body>

  <script>
    /*对象是什么*/
    var obj = {
        name:'chen',
        age:12,
        hobby:['上刀山','下火海'],
        bro:{
            name:'jie',
            age:12,
        },
        func:function () {
            console.log('obj的方法')
        }
    }
    console.log(obj.name);//chen
    console.log(obj.age);//12
    console.log(obj.hobby);//['上刀山','下火海']
    console.log(obj.hobby[0]);//上刀山
    console.log(obj.bro);//{ name:'jie', age:12}
    console.log(obj.bro.name);//jie
    console.log(obj.func());//obj的方法  undefined


    /*对象的创建*/
    /*1.Object对象创建*/
    var obj1 = new Object();
    obj1.name = "chen";
    obj1.age = 12;
    console.log(obj1);//{ name:'chen', age:12}
    /*2.花括号创建*/
    var obj2 = {
        name:'chen',
        age:12,
    }
    console.log(obj2);//{ name:'chen', age:12}
    /*3.构造函数创建*/
    function Obj3(name,age){
        this.name = name;
        this.age = age;
    }
    console.log(new Obj3('chen',12))//Obj3 {name: 'chen', age: 12}


    /*对象成员的访问*/
    /*1.点表示法*/
    var obj = {
        name:'chen',
        age:12,
        hobby:['上刀山','下火海'],
        bro:{
            name:'jie',
            age:12,
        },
        func:function () {
            console.log('obj的方法')
        }
    }
    console.log(obj.name);//chen
    console.log(obj.age);//12
    console.log(obj.hobby);//['上刀山','下火海']
    console.log(obj.hobby[0]);//上刀山
    console.log(obj.bro);//{ name:'jie', age:12}
    console.log(obj.bro.name);//jie
    console.log(obj.func);//ƒ () { console.log('obj的方法') }
    console.log(obj.func());//obj的方法  undefined
    console.log('====================')
    /*2.括号表示法*/
    var obj = {
        name:'chen',
        age:12,
        hobby:['上刀山','下火海'],
        bro:{
            name:'jie',
            age:12,
        },
        func:function () {
            console.log('obj的方法')
        }
    }
    console.log(obj[name]);//undefined
    console.log(obj['name']);//chen
    console.log(obj['age']);//12
    console.log(obj['hobby']);//['上刀山','下火海']
    console.log(obj['hobby'][0]);//上刀山
    console.log(obj['bro']);//{ name:'jie', age:12}
    console.log(obj['bro'].name);//jie
    console.log(obj['bro']['name']);//jie
    console.log(obj['func']);//ƒ () { console.log('obj的方法') }
    console.log(obj['func']());//obj的方法  undefined


    /*对象成员的修改*/
    var obj = {
        name:'chen',
        age:12,
    }
    console.log(obj)//{name: 'chen', age: 12}
    obj.name = 'jie';
    obj['age'] = 25;
    obj.newName  = 'JIE';
    obj['newAge'] = 35;
    obj.func1 = function (){
        console.log('obj.func1');
    }
    obj['func2'] = function () {
        console.log('obj.func2')
    }
    console.log(obj)//{name: 'jie', age: 25, newName: 'JIE', newAge: 35, func1: ƒ,…}
    console.log(obj.func1());//obj.func1  undefined
    console.log(obj.func2());//obj.func2  undefined

    var obj = {
        name:'chen',
        age:12,
    }
    var attr1 = 'attrName1';
    var attr2 = 'attrName2';
    obj.attr1 = attr1;
    obj[attr2] = attr2;
    console.log(obj);//{name: 'chen', age: 12, attr1: 'attrName1', attrName2: 'attrName2'}
  </script>
</html>